<template>
	<view>
		<view v-for="(item, index) in list" :key="index" class="item" @click="itemClick(item)">
			<view style="width: 64rpx;height: 64rpx">
				<u-image width="64rpx" height="64rpx" src="https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/faq_q.png"></u-image>
			</view>
			<text class="answer">{{item.question}}</text>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	import { getFaqPage } from '@/api/clientele.js'
	export default {
		data() {
			return {
				status: 'loadmore',
				page: -1,
				list: [],
			}
		},
		onLoad() {
			this.getFaq(this.page);
		},
		methods: {
			getFaq(page) {
				getFaqPage('', page + 1, 10).then(res => {
					console.log(res);
					if (res.data.last) {
						this.status = 'nomore';
					}
					this.page = res.data.number;
					this.list = this.list.concat(res.data.content);
				})
			},
			
			itemClick(item) {
				this.$u.route({
					url: 'pages_operate/clientele/faq-detail-page',
					params: item,
				})
			},
			
			loadMore() {
				if (this.status === 'nomore') {
					return;
				}
				this.status = 'loading';
				this.getFaq(this.page);
			},
			
			onReachBottom() {
				this.loadMore();
			},
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
	
	.item{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 20rpx;
		margin: 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		
		.answer{
			flex-grow: 1;
			margin-left: 20rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: $app-font-color;
		}
	}
</style>
